<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page isELIgnored="false" %>
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>宝雅智能</title>
    <script src="../js/mui.min.js"></script>
    <link href="../css/mui.min.css" rel="stylesheet" />
    <link href="../css/app.css" rel="stylesheet" />
    <script src="../js/vue_dev.js"></script>
    <script src="../js/md5.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
    <script src="../js/app.js"></script>
    <style>
        .mui-input-row label {
            width: 40%;
        }

        .mui-input-row label~input,
        .mui-input-row label~select,
        .mui-input-row label~textarea {
            width: 60%;
        }

        .mui-button-row button {
            width: 46%;
        }
    </style>
</head>

<body>
    <header id="vhead" class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">
        </a>
        <h1 class="mui-title" id="deviceTitle">{{device.type_name112312}}</h1>
    </header>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    
    <div class="mui-input-group"><a style="color: red;">操作列表</a>
		<ul class="mui-table-view mui-grid-view mui-grid-9" id="commandFirst">
			<!-- <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="width:20%;padding-left: 0px;">
                    <span class="mui-icon mui-icon-home smart-icon"></span>
                    <div class="mui-media-body" id="gobackhome1">开</div>
                </li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="width:20%;padding-left: 0px;">
					<span class="mui-icon mui-icon-home smart-icon"></span>
					<div class="mui-media-body">关</div>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="width:20%;padding-left: 0px;">
					<span class="mui-icon mui-icon-home smart-icon"></span>
					<div class="mui-media-body">设置密码</div>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="width:20%;padding-left: 0px;">
					<span class="mui-icon mui-icon-home smart-icon"></span>
					<div class="mui-media-body">清除密码</div>
				</li> -->
		</ul>
	</div>
	
    <div id="vmain" class="mui-content">
        <!-- <div class="mui-input-group">
            <div class="mui-input-row">
                <label style="font-size: medium;color:#666666;">名称：</label>
                <input type="text" style="color:limegreen;" class="mui-input" v-model="curdevice.name" />
            </div>
        </div>
		<div class="mui-input-group">
			<div class="mui-input-row">
				<label style="font-size: medium;color:#666666;">设备状态：</label>
				<input type="text" :style="online?'color:limegreen':'color:red'" disabled="disabled" class="mui-input" :value="online?'在线':'离线'" />
			</div>
		</div> -->
        <div class="mui-button-row">
            <button v-on:click="saveset" class="mui-btn mui-btn-success">保存设置</button>
        </div>
    </div>
<script src="<%=request.getContextPath()%>/jquery/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
    var url=location.href;
	//var rs = decodeURI(url).toString()
	var strUrl = JSON.stringify(location.href);
	var strSplit = strUrl.split("&")
	var renterId = strSplit[0].split("\?")[1].split("=")[1]
	var roomId = strSplit[1].split("=")[1]
	var timestamp = strSplit[2].split("=")[1]
	var sign = strSplit[3].split("=")[1]
	var deviceCode = strSplit[4].split("=")[1].split("\"")[0];
	console.log(deviceCode)
	
    	$(function(){
    		$.ajax({//这个是ajax请求
                <%-- url:"<%=request.getContextPath()%>/wx/findRoomEquipmentByUser.do?roomNumber="+roomId, --%>
                url:"<%=request.getContextPath()%>/wx/findEquipmentOperateByCode.do?deviceCode="+deviceCode,
                 type:"POST",
                 success:function(data){
                     for(var i=0;i<data.data.length;i++){//data.length是获取data的长度。for循环
                    	 //$("#first").append("<li>"+data.data[i].roomEquipment+"</li>");
                    	// <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="width:20%;padding-left: 0px;">
                        // <span class="mui-icon mui-icon-home smart-icon"></span>
                        // <div class="mui-media-body" id="gobackhome1">回家</div>
                     	// </li>
                        var userid = data.data[i].deviceId
                         $("#commandFirst").append("<li  class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\" style=\"width:20%;padding-left: 0px;\">" +
                          "<span id=\""+data.data[i].id+"\" value=\""+data.data[i].deviceOperate+"\" class=\"mui-icon mui-icon-home smart-icon\"></span>" +
                         "<div  class=\"mui-media-body\" >" +
                         data.data[i].deviceOperate+"</div>"
                         +
                         //"<input type=\"radio\" name=\"radio\" value=\"1\">开"+
                         //"<input type=\"radio\" name=\"radio\" value=\"1\">关"+
                         //"<input type=\"radio\" name=\"radio\" value=\"1\">停"+
                         //abc(data.data[i].deviceId)+
                         "</li>"); //如果添加class或者id内容要加单引号例如：$("#first").append("<li class='a'>"+data[i].name+"</li>");
			    		 $(document).on("click", "#"+data.data[i].id, function(e) {
			    			//console.log($(this).attr('id'))
			    			switch ($(this).attr('value')) {
				    			 	case  '开锁' :  doAutoLockOpen($(this).attr('id'))
				    			 		break;
				    			 	case  '关锁' : doAutoLockClose($(this).attr('id'))
				    			 		break;
				    			 	case  '设置密码' : doAutoLockEdit($(this).attr('id'))
				    			 		break;
				    			 	case  '清除密码' : doAutoLockClean($(this).attr('id'))
				    			 		break;
				    			 }
			    		 });
                     }
                 }
             });
    		
    		function doAutoLockOpen(id){
    			console.log(id)
    		}
    	})
    </script>
</body>
</html>